<template>
	<div class="m-page-main" style="height: auto">
		<ul class="car-list">
			<li>
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="搜索车队"><el-input v-model="formInline.id" placeholder="请输入车队ID"></el-input></el-form-item>
					<el-form-item><el-button type="primary" @click="onSubmit" style="background-color:#0143a0">搜索</el-button></el-form-item>
				</el-form>
			</li>
			<li v-for="car in list" :key="car.id">
				<img :src="car.logoimage" class="car-list-img" />
				<div class="car-list-title">{{ car.title }}</div>
				<div class="car-list-id">ID: {{ car.id }}</div>
				<div class="car-list-more" @click="join(car.id)">立即加入</div>
			</li>
		</ul>
		<Pagination class="mu-page" :hide-on-single-page="true" background layout="prev, pager, next" :total="total"></Pagination>
	</div>
</template>
<script>
import { Pagination } from 'element-ui';
import { carList,applay } from '@/api';
export default {
	components: {
		Pagination
	},
	data() {
		return {
			page: 1,
			limit: 10,
			total: 0,
			list: [],
			formInline: {
				id: ''
			}
		};
	},
	created() {},
	methods: {
		join(carid) {
			applay({
				cmsmotorcadeid: carid,				
			}).then(res => {
				return this.$message(res.data.msg);
			});
		},
		onSubmit() {
			if (this.formInline.id == '') {
				return this.$message('请输入车队ID或车队名称');
			}
			this.getList();
		},
		getList() {
			carList({
				keyword: this.formInline.id,
				page: this.page,
				limit: this.limit
			}).then(res => {
				this.list = res.data.data.rows;
				this.total = res.data.data.total;
			});
		}
	}
};
</script>
<style scoped>
.m-page-main {
	width: 995px;
	float: right;
	margin-right: 2px;
}

.car-list {
	border-radius: 10px;
}
.car-list li {
	color: #7d7d7d;
	font-size: 18px;
	background-color: rgb(255, 255, 255);
	box-shadow: 2.5px 4.33px 10px 0px rgb(0, 0, 0, 0.2);
	padding: 25px 30px 25px;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
}
.car-list li:nth-child(1) {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.car-list li:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.car-list li img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin-right: 10px;
}
.car-list-title,
.car-list-id {
	flex: 1;
}
.car-list-id {
	font-size: 14px;
	color: #535353;
}
.car-list-more {
	font-size: 14px;
	color: #3f87f5;
}
.car-list-title {
	color: #313131;
}
.title span {
	font-size: 16px;
	color: #7d7d7d;
	float: right;
}
.meta {
	line-height: 40px;
}
.mu-page {
	padding: 20px 0;
}
</style>
